<template>
  <div id="main">
    <div class="dataList">
      <home-state></home-state>
      <article-list :whereType="{}" />
    </div>
    <transition name="fade2">
      <div v-show="isShowAside">
        <home-card />
        <home-billboard />
      </div>
    </transition>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { reactive, toRefs, onUnmounted } from 'vue'
import HomeCard from '@/components/homeMain/HomeCard.vue'
import HomeBillboard from '@/components/homeMain/HomeBillboard.vue'
import ArticleList from '@/components/articleList/ArticleList.vue'
import HomeState from '@/components/homeMain/HomeState.vue'
export default {
  components: { HomeCard, HomeBillboard, ArticleList, HomeState },
  setup (props) {
    const data = reactive({
      isShowAside: true
    })
    if (window.innerWidth < 960) {
      data.isShowAside = false
    } else {
      data.isShowAside = true
    }
    window.onresize = () => {
      if (window.innerWidth < 960) {
        data.isShowAside = false
      } else {
        data.isShowAside = true
      }
    }
    onUnmounted(() => {
      window.onresize = null
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>
<style lang="scss" scoped>
#main {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 30px auto;
}

.dataList {
  flex: 1;
  margin-right: 20px;
}
</style>